<template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="small" placeholder="请输入手机号" v-model="pager.parameters.parm" prefix-icon="el-icon-search"
                          style="max-width: 180px"></el-input>
                <el-button size="small" type="primary" class="ml10" @click="initTableData()">查询</el-button>
            </div>
            <el-table :data="pager.records" stripe style="width: 100%">
                <el-table-column prop="num" type="index" show-overflow-tooltip></el-table-column>
                <el-table-column prop="testDate" label="检测日期" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="openid" label="昵称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" label="性别" show-overflow-tooltip :formatter="sfktFormate"></el-table-column>
                <el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>
                <el-table-column prop="birthday" label="生日" show-overflow-tooltip></el-table-column>
                <el-table-column prop="job" label="职业" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gms" label="过敏史" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jzs" label="家族史" show-overflow-tooltip></el-table-column>
                <el-table-column prop="diaResult" label="诊断结果" show-overflow-tooltip></el-table-column>
                <el-table-column prop="diaMsg" label="诊断说明" show-overflow-tooltip></el-table-column>
                <el-table-column prop="diaPdf" label="诊断报告" show-overflow-tooltip>
                    <template #default="scope">
                        <el-col v-if="scope.row.diaResult != null"
                                shadow="hover">
                            <el-link :href="scope.row.diaPdf" target="_blank" class="buttonText" type="primary"
                                     :underline="false">点击查看
                            </el-link>
                        </el-col>

                    </template>
                </el-table-column>

                <el-table-column prop="testTime" label="更新时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="path" label="操作" width="90">
                    <template #default="scope">
                        <Auth :value="'btn.edit'">
                            <el-col>
                                <el-button size="mini" type="text" @click="onOpenMsg(scope.row)">
                                    <p v-if="scope.row.diaResult != null ">修改</p>
                                    <p v-else>详情</p>
                                </el-button>
                            </el-col>
                        </Auth>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                    class="mt15"
                    :pager-count="5"
                    :page-sizes="[10]"
                    :current-page="pager.current"
                    background
                    :page-size="pager.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pager.total"
            >
            </el-pagination>
        </el-card>
        <PopInspect ref="toRef" @fuzujian="closePop"/>
    </div>

</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, ref } from 'vue';

	import PopInspect from '/@/views/aiomember/component/PopInspect.vue';
	import { findAllInspectData } from '/@/api/inspect.ts';
	// import { useRoute } from 'vue-router';
	import Auth from '/@/components/auth/auth.vue';


	export default {
		name: 'inspect',
		components: { Auth, PopInspect },
		setup() {

			// const { proxy } = getCurrentInstance() as any;
			// const route = useRoute();


			const toRef = ref();
			const state: any = reactive({

				pager: {
					records: [],
					total: 0,
					current: 1,
					size: 10,
					loading: false,
					parameter: '',
					parameters: {
						parm: '',
					},

				},
			});
			// 初始化表格数据
			const initTableData = () => {
				findAllInspectData(state.pager).then((res: any) => {
					state.pager.records = res.data.records;
					state.pager.total = res.data.total;

				});
			};
			// 分页改变
			const onHandleSizeChange = (val: number) => {
				state.pager.size = val;
				initTableData();
			};
			// 分页改变
			const onHandleCurrentChange = (val: number) => {
				state.pager.current = val;
				initTableData();
			};
			// 页面加载时
			onMounted(() => {
				console.log('====>>页面加载');
				initTableData();
			});

			const onOpenMsg = (row: object) => {
				toRef.value.openDialog(row);


			};
			const sfktFormate = (row: object) => {
				if (row.sex === '1') {
					return '男';
				} else {
					return '女';
				}
			};
			const closePop = () => {
				initTableData();

			};


			return {
				onHandleSizeChange,
				onHandleCurrentChange,
				...toRefs(state),
				onOpenMsg,
				toRef,
				initTableData,
				sfktFormate,
				closePop,
			};
		},
	};
</script>

<style scoped lang="scss">
    .system-user-container {
        .system-user-search {
            text-align: right;
        }

        .system-user-photo {
            width: 40px;
            height: 40px;
            border-radius: 100%;
        }
    }

    .tools-warp-form-msg {
        color: #666666;
        font-size: 14px;

        .tools-warp-form-msg-red {
            color: red;
        }
    }
</style>
